<!--回单详情-->
<template>
  <div class="gridContainer">
    <div class="order-detail-top">
      <div class="order-detail-header">
        <span class="f-l">业务单号：<i>{{BbMain.PoBillNo || BbMain.BBillNo}}</i></span>
      </div>
      <ul class="order-detail-info">
        <li class="displayflex">
          <label>回单时间</label>
          <p class="flex1">{{PoMain.ReceiveTime | timeshort}}</p>
        </li>
        <li class="displayflex">
          <label>回单人</label>
          <p class="flex1">{{PoMain.Receiver}}</p>
        </li>
        <li class="displayflex">
          <label>收货地址</label>
          <p class="flex1">{{PoMain.ArrivalVenue | removeSplash}}{{PoMain.ArrivalAddress}}</p>
        </li>
        <li class="displayflex">
          <label>订单件数</label>
          <p class="flex1"><em class="font-red">{{BbMain.Pkgs || '0'}}</em>件</p>
        </li>
        <li class="displayflex" v-if="BbMain.RecPKGS">
          <label>签收件数</label>
          <p class="flex1"><em class="font-red">{{BbMain.RecPKGS || '0'}}</em>件</p>
        </li>
      </ul>      
    </div>

    <div class="order-detail-top" v-if="Exceptions.length > 0">
      <div style="margin-bottom:10px;"  v-for="item in Exceptions">
        <ul class="order-detail-info">
          <li class="displayflex">
            <label>异常原因</label>
            <p class="flex1">{{item.ExceptionMemo || item.Information}}</p>
          </li>
          <li class="displayflex">
            <label>记录时间</label>
            <p class="flex1">{{item.RDate | timeshort}}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="order-detail-top" v-show="BbMain.Memo">
      <div class="order-detail-header">
        <span class="f-l">备注：{{BbMain.Memo}}</span>
      </div>
    </div>

    <uploader v-if="Img52.length > 0" :title="'提货凭证'" :img-list="Img52" :max="0"></uploader>
    <uploader v-if="Img56.length > 0" :title="'交货凭证'" :img-list="Img56" :max="0"></uploader>
    <uploader v-if="Img81.length > 0" :title="'签收凭证'" :img-list="Img81" :max="0"></uploader>

    <!-- <div class="order-detail-top" v-show="imglist">
      <div class="order-detail-header">
        <span class="f-l">单据凭证</span>
      </div>
      <ul class="order-detail-img">
        <li v-for="item in imglist"  @click="checkImg(item)"><div class="order-img-box"><img :src="item | filterImgUrl"></div></li>
      </ul>
    </div> -->
  </div>
</template>


<script>
import uploader from '@/components/share/imageUploader/imageUploader.vue';

export default {
  components: {
      uploader,
  },
  data: function() {
    return {
      PoMain: {},
      BbMain: {},
      Exceptions:[],
      HandoverListL:[],
      Img52:[],
      Img56:[],
      Img81:[]
    };
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo')?JSON.parse(localStorage.getItem('userinfo')):null;
    }
  },
  created(){
    this.getData();
  },
  methods: {
    getData() {
      var query = {
        TenantGuid: this.userinfo.TenantGuid,
        Guid: this.$route.query.Guid,
        QueryType: "Tracing",
      };
      this.Ajax.post('GetOrderDetail', query).then((res) => {
        if (res.IsSuccess) {
          this.PoMain = res.Data.PoMain;
          this.BbMain = res.Data.BbMain;
          this.HandoverList = res.Data.HandoverList;
          this.Exceptions = res.Data.Exceptions;

          this.HandoverList.forEach((x, i) => {
            let Obj = {},
                Json = [];
            Obj = x.HandoverPict !== '' && x.HandoverPict?JSON.parse(x.HandoverPict):{};
            if(Object.keys(Obj).length > 0){
              Json = Json.concat(Obj.bbill?Obj.bbill : []);
              Json = Json.concat(Obj.platenumber?Obj.platenumber : []);
              Json = Json.concat(Obj.invoice?Obj.invoice : []);
              Json = Json.concat(Obj.logistics?Obj.logistics : []);
              switch(x.HandoverType){
                case '1':
                  this.Img52 = Json;
                  break;
                case '2':
                  this.Img56 = Json;
                  break;
                case '3':
                  this.Img81 = Json;
                  break;
              }
            }
          });



        } else {
          this.Toast({
            message: '列表为空，请稍后刷新',
          });
        }
      });
    },
  }
};
</script>